<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>音视频分离</title>
    <style>
      /* 遮罩层 */
      .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
      }

      /* 弹窗样式 */
      .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 2;
        width: 300px;
        text-align: center;
        border-radius: 10px;
      }

      /* 关闭按钮 */
      .close-btn {
        background-color: #f44336;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 10px;
      }

      .close-btn:hover {
        background-color: #d32f2f;
      }

      table {
        border-collapse: collapse;
        /* 合并边框 */
        border: none;
        /* 隐藏表格边框 */
      }

      th,
      td {
        border: none;
        /* 隐藏单元格边框 */
        padding: 10px;
        /* 添加一些内边距 */
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        padding: 20px;
      }

      .btn-primary {
        padding: 8px 16px;
        background-color: #5048e5;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .input-group {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .input-group label {
        font-size: 20px;
        color: #666;
        white-space: nowrap;
      }

      .input-group .long-input {
        flex: 1;
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 20px;
      }

      .button-group {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        width: 20%;
      }

      .open-file-btn {
        display: inline-block;
        background: #1890ff;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        margin: 10px;
      }

      .input-group {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
      }

      .input-group label {
        min-width: 80px;
        color: #666;
      }

      .input-group input[type="text"] {
        flex: 1;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .button-group {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }

      .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .file-list {
        margin: 20px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      .file-list table {
        width: 100%;
        border-collapse: collapse;
      }

      .file-list th,
      .file-list td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }

      .file-list th {
        background-color: #f8f9fa;
        font-weight: normal;
        color: #666;
      }

      .options-group {
        margin: 20px 0;
      }

      .slider-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .slider {
        flex: 1;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
      }

      input[type="checkbox"] {
        cursor: pointer;
      }

      .radio-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }

      .radio-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .input-group select.long-input {
        appearance: none;
        background: #fff
          url('data:image/svg+xml;charset=US-ASCII, <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L1 4h10z" fill="%23999" /></svg>')
          no-repeat right 12px center;
        padding-right: 30px;
      }

      .input {
        padding: 5px;
      }

      /* 隐藏原生复选框 */
      .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }

      /* 自定义复选框外观 */
      .custom-checkbox .checkmark {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #fff;
        border: 2px solid #ccc;
        border-radius: 3px;
        margin-right: 8px;
        vertical-align: middle;
        top: -3px;
      }

      /* 选中状态样式 */
      .custom-checkbox input:checked ~ .checkmark {
        background-color: #5048e5;
        border-color: #5048e5;
      }

      /* 勾选图标（使用伪元素） */
      .custom-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 3px;
        top: -1px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .custom-checkbox input:checked ~ .checkmark:after {
        display: block;
      }

      /* 隐藏原生单选框 */
      .custom-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
      }

      .custom-radio {
        margin-right: 10px;
      }

      /* 自定义单选框外观 */
      .custom-radio .radio-icon {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 2px solid #999;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
        transition: all 0.3s ease;
        top: -3px;
      }

      /* 选中状态样式 */
      .custom-radio input:checked ~ .radio-icon {
        border-color: #5048e5;
        background-color: #5048e5;
        box-shadow: inset 0 0 0 3px white; /* 内圆效果 */
      }

      /* 悬浮交互效果 */
      .custom-radio:hover .radio-icon {
        border-color: #555;
      }

      /* 禁用状态 */
      .custom-radio input:disabled ~ .radio-icon {
        background-color: #eee;
        border-color: #ccc;
      }

      .range-container {
        --track-height: 4px;
        --thumb-size: 18px;
        --primary-color: #5048e5;
        --track-fill: linear-gradient(
          90deg,
          var(--primary-color) 0%,
          var(--primary-color) var(--fill-percent, 100%),
          #e3e3e3 var(--fill-percent, 100%),
          #e3e3e3 100%
        );
        position: relative;
        width: 10%;
        padding: 15px 0;
        top: -3px;
        margin-right: 10px;
      }

      .custom-range {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: var(--track-height);
        background: var(--track-fill);
        border-radius: 10px;
        outline: none;
        margin: 0;
        transition: background 0.3s ease;
      }

      /* Webkit/Blink 内核 */
      .custom-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: var(--thumb-size);
        height: var(--thumb-size);
        background: white;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
      }

      /* Firefox 内核 */
      .custom-range::-moz-range-thumb {
        width: var(--thumb-size);
        height: var(--thumb-size);
        background: white;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      }

      .number-input-container {
        --primary-color: hsl(210, 90%, 55%);
        --border-color: #ddd;
        --focus-glow: 0 0 0 3px rgba(33, 150, 243, 0.2);
        display: inline-flex;
        align-items: center;
        position: relative;
      }

      .custom-number-input {
        -webkit-appearance: none;
        appearance: none;
        width: 80px;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.5;
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      /* Firefox 移除箭头 */
      .custom-number-input[type="number"] {
        -moz-appearance: textfield;
      }

      .custom-select {
        /* 基础样式 */
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: white;
        font-size: 14px;
        color: #333;
        cursor: pointer;

        /* 移除默认箭头（可选） */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        /* 添加自定义箭头图标 */
        background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path  d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
      }

      /* 悬停和焦点状态 */
      .custom-select:hover {
        border-color: #888;
      }
      .custom-select:focus {
        outline: none;
        border-color: #0066ff;
        box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2);
      }

      .progress-section {
        margin: 20px 0;
        display: flex;
        align-items: center;
      }

      .progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        color: #666;
        min-width: 5%;
      }

      .progress-bar {
        width: 100%;
        height: 4px;
        background: #f5f5f5;
        border-radius: 2px;
        margin-bottom: 20px;
        transform: translateY(10px);
      }

      .progress-value {
        text-align: right;
        color: #666;
        font-size: 14px;
      }

      .log-section {
        margin-top: 20px;
      }

      .log-label {
        color: #666;
        margin-bottom: 10px;
      }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
  </head>
  <body>
    <div id="overlay" class="overlay" onclick="closeModal()"></div>

    <div id="modal" class="modal">
      <p id="message">消息弹窗</p>
      <!-- TODO: 调整消息弹窗样式 -->
      <button class="close-btn" onclick="closeModal()">关闭</button>
    </div>

    <div class="container">
      <div class="progress-section">
        <div class="progress-label">任务进度:</div>
        <div class="progress-bar"></div>
        <div class="progress-value">0.00%</div>
      </div>
      <div class="input-group">
        <label>素材目录:</label>
        <label for="clipInput"></label
        ><input
          type="text"
          id="clipInput"
          placeholder="请选择视频文件/文件夹"
          onclick="clipInput('clipInput')"
          value=""
        />
        <span id="clipInputCount" style="margin-left: 10px;">视频数量: 0</span>
      </div>
      <button class="btn btn-primary" onclick="start_work()">
        开始分离音视频
      </button>
      <div class="input-group">
        <label>导出目录:</label>
        <label for="clipOutput"></label
        ><input
          type="text"
          onclick="chooseFolder('clipOutput')"
          id="clipOutput"
          placeholder="请选择文件夹"
          value=""
        />
      </div>
      <a href="#" class="btn btn-primary" onclick="openFile('clipOutput')"
        >打开文件夹</a
      >

      <div class="log-section">
        <div class="log-label">任务日志输出:</div>
      </div>
    </div>

    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function () {
        new QWebChannel(parent.qt.webChannelTransport, function (channel) {
          Bridge = channel.objects.Bridge;

          Bridge.started.connect(function (msg) {
            showModal(msg);
          });
          Bridge.finished.connect(function (msg) {
            showModal(msg);
          });
          Bridge.failed.connect(function (msg) {
            showModal(msg);
          });

          /*  文件操作方法  */
          // 选择文件夹
          window.chooseFolder = function (eid) {
            Bridge.choose_folder(eid);
          };
          window.clipInput = function () {
            Bridge.choose_folder_and_read_video_files("clipInput");
          };

          // 打开文件或者文件夹
          window.openFile = function (eid) {
            let path = document.getElementById(eid).value;
            if (path) {
              Bridge.open_file(path);
            }
          };

          // 选择的文件夹信号槽
          Bridge.select_folder_result.connect(function (eid, path) {
            document.getElementById(eid).value = path;
          });
          // 返回智能分镜目录
          Bridge.select_files_result.connect(function (eid, files, count) {
            // 更新选择的文件数量
            document.getElementById("clipInputCount").innerText =
              "视频数量: " + count;
          });

          /*  操作逻辑  */
          // 开始分镜
          window.start_work = function () {
            let clip_path = document.getElementById("clipInput").value;
            let output_path = document.getElementById("clipOutput").value;
            if (!clip_path) {
              showModal("请选择素材");
              return;
            }
            if (!output_path) {
              showModal("请选择导出目录");
              return;
            }
            let task_items = {
              task: "音视频分离",
              clip_path: clip_path,
              output_path: output_path,
            };
            if (clip_path && output_path) {
              Bridge.start_worker(JSON.stringify(task_items));
            } else {
              showModal("请选择素材目录和导出目录");
            }
          };
        });

        window.showModal = function (message) {
          document.getElementById("message").innerText = message;
          document.getElementById("overlay").style.display = "block";
          document.getElementById("modal").style.display = "block";
        };

        window.closeModal = function () {
          document.getElementById("overlay").style.display = "none";
          document.getElementById("modal").style.display = "none";
        };
      });
    </script>
  </body>
</html>
